<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<button onclick="clickHandle(true)">显示</button>
<button onclick="clickHandle(false)">隐藏</button>
<button onclick="moveTo(300)">300</button>
<button onclick="moveTo(600)">600</button>
<div id="popupBox">
    <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
        <g fill="#48c0fc">
            <rect x="230" y="235" width="5" height="30" transform="translate(0 -1.94252)">
                <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.1"></animateTransform>
            </rect>
            <rect x="240" y="235" width="5" height="30" transform="translate(0 0.0574799)">
                <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.2"></animateTransform>
            </rect>
            <rect x="250" y="235" width="5" height="30" transform="translate(0 2.05748)">
                <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.3"></animateTransform>
            </rect>
            <rect x="260" y="235" width="5" height="30" transform="translate(0 4.05748)">
                <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.4"></animateTransform>
            </rect>
            <rect x="270" y="235" width="5" height="30" transform="translate(0 3.94252)">
                <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.5"></animateTransform>
            </rect>
        </g>
        <circle fill="none" stroke="#48c0fc" stroke-width="1" stroke-miterlimit="10" stroke-dasharray="10,10" cx="250" cy="250" r="39" transform="rotate(-236.34 250 250)">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="5s" from="0 250 250" to="-360 250 250" repeatCount="indefinite"></animateTransform>
        </circle>


        <circle fill="none" stroke="#48c0fc" stroke-width="4" stroke-miterlimit="15" stroke-dasharray="62.8" cx="250" cy="250" r="60" transform="rotate(0 250 250)">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="5s" from="0 250 250" to="360 250 250" repeatCount="indefinite"></animateTransform>
        </circle>

        <circle r="122" cy="250" cx="250" stroke-width="4" stroke="#48c0fc" fill="none"/>
        <circle fill="none" stroke="#48c0fc" stroke-width="6" stroke-miterlimit="15" stroke-dasharray="6" cx="250" cy="250" r="120" transform="rotate(0 250 250)">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="5s" from="0 250 250" to="-360 250 250" repeatCount="indefinite"></animateTransform>
        </circle>

        <circle fill="none" stroke="#48c0fc" stroke-width="4" stroke-miterlimit="15" stroke-dasharray="118" cx="250" cy="250" r="150" transform="rotate(0 250 250)">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="5s" from="0 250 250" to="360 250 250" repeatCount="indefinite"></animateTransform>
        </circle>
    </svg>
</div>
<script>
    function clickHandle(flag) {
        console.log("显示隐藏", flag)
        if (flag) {
            document.getElementById("popupBox").style.display = "block";
        } else {
            document.getElementById("popupBox").style.display = "none";
        }
    }

    function moveTo(num) {
        document.getElementById("popupBox").style.left = num + "px";
        document.getElementById("popupBox").style.top = num + "px";
    }
</script>
<style>
    #popupBox {
        /*display: none;*/
        width: 0;
        height: 0;
        position: absolute;
        top: 200px;
        left: 200px;
    }

    #popupBox svg {
        background-color: #021323;

    }
</style>
</body>
</html>